<template>
    <div class="page_box">
        <h4>child</h4>
        <!-- vue3 依赖注入 ***************************  -->
        <div @click="reactive_count++">{{ reactive_count }}</div>
        <div @click="initCountFun">初始化数据</div>

        <!-- vue3 slot ***************************  -->
        <!-- <slot name="slotItem" :item="slotItem"></slot> -->
            <!-- $slots实现插槽透传 -->
        <template 
            v-for="(item, key ,index) in $slots" 
            :key="index"
            v-slot[key]="scope"
        >
            <slot 
                :name="key"
            ></slot>
        </template>

        <!-- vue3 hookjs使用 ***************************  -->
        <div>
            {{ studySomeThing.name }}
        </div>

    </div>
</template>
<script setup>
import { ref, provide, inject, reactive } from 'vue';
import { useStudySomeThing } from './hook';

// vue3 依赖注入 *************************** 
// console.log(inject("set-string"));
// console.log(inject("set-object"));
let reactive_count = inject("set-reactive");
let initCountFun = inject("set-fun");

// vue3 slot *************************** 
let slotItem = reactive({name:"Tim"});

// vue3 hookjs使用 *************************** 
let { studySomeThing } = useStudySomeThing();

</script>